<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>DSD Team 4</title>
        <meta charset="UTF-8">
    </head>
    <style>

        body {
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            background-color: #000000;
            overflow: hidden;
        }
        .right {
            display: inline;
        }
        .left {
            display: inline;
            width:250px;
            overflow: hidden;
            margin:0px;
        }
        div{
            margin: 10px;
        }
        #player_top{
            width:100%;
            height: 15px;
            margin:0px;
        }
        /* Download button */
        .btn {
            display:inline-block;
            cursor:pointer;
            border-color: #c5c5c5;
            border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
            color: #ffffff;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            background-color: #006dcc;
            *background-color: #0044cc;
            background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
            background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
            background-image: -o-linear-gradient(top, #0088cc, #0044cc);
            background-image: linear-gradient(to bottom, #0088cc, #0044cc);
            background-repeat: repeat-x;
            border-color: #0044cc #0044cc #002a80;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        }

        .facebookBtns:hover,
        .facebookBtns:active,
        .facebookBtns.active,
        .facebookBtns.disabled,
        .facebookBtns[disabled] {
            color: #ffffff;
            background-color: #0044cc;
            *background-color: #003bb3;
        }

        .facebookBtns:active,
        .facebookBtns.active {
            background-color: #003399 \9;
        }
        #myInfo{
            align:left;
            font-weight: bold;
        }
        table, th, td {
    border: 1px solid black;
}
    </style>
    
    <script src="./js/facebook.js"></script>
    <script src='./js/jquery/jquery.js'></script>
    <script src="./js/controlYoutube.js"></script>
    <script src="./js/controlTwitter.js"></script>
    <body onload="run();">
        <div id="player_top"></div>
        <div class="left">
            <a class="twitter-timeline" href="https://twitter.com/IngYuJo" data-widget-id="542759780020805632">@IngYuJo 님의 트윗</a>
        </div>
        <div class="right" align="center">
            <div id="player"></div>
            <div id="facebookDIV" align="center">
                <div class="login" id="facebookBtn">
                    <fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>
                    <button href="#" onclick="graphStreamPublish();return false;" class="btn facebookBtns">Post</button>
                    <button href="#" onclick="share();return false;" class="btn facebookBtns">Share</button>
                    <button href="#" onclick="showDetails();return false;" class="btn facebookBtns">Get Information</button>
                </div>
                <div>
                    <div id="myInfo" margin="5dp"></div>
                </div>
            </div>
        </div>
    </body>
</html>
